<template>
    <Page class="basic company">
        <template #header>
            <EdSelect v-model="queryForm.villageId" :selectParams="proParams"></EdSelect>
            <EdSelect v-model="queryForm.orderType" :selectParams="orderTypeParams"></EdSelect>
            <EdDateTimeRange  ref="timeRef" @emit-echo-time-range="emitEchoTimeDate($event, 'pickerTime')"></EdDateTimeRange>

            <el-button class="ed-button ed_black-bottom" @click="search()"><svg-icon class="svg-middle" icon-class="search-svg"/>查 询</el-button>
            <el-button class="ed-button ed_white_bottom" @click="reset()"><svg-icon icon-class="reset-svg"/>重 置</el-button>
        </template>
        <PageCard title="工单记录列表">
            <template #actions>
                <el-button slot="reference"  class="ed-button ed_white_bottom marginRight8 ed-button36" @click="exportBtn()"><i class="el-icon-upload2"></i>导出</el-button>
            </template>
            <ApiTable :api="tableApi" ref="table" :params="queryForm">
                <!-- <el-table-column type="index" width="80" label="序号"></el-table-column> -->
                <el-table-column :show-overflow-tooltip="true" prop="villageName" label="项目"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="serveOrderType" label="工单类型">
                    <template slot-scope="scope">
                        <span>{{returnName(scope.row['serveOrderType'], orderTypeParams.options)}}</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="total" label="总工单数"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="totalFee" label="工单收款金额"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="emergency" label="紧急工单"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="close" label="已关闭工单"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="paid" label="已付款工单"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="finished" label="已完成工单"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="confirm" label="待确认工单"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="processing" label="处理中工单"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="pending" label="待处理工单"></el-table-column>
                <!-- <el-table-column :show-overflow-tooltip="true" prop="rejected" label="已驳回工单"></el-table-column> -->
                <!-- <el-table-column :show-overflow-tooltip="true" prop="confirmed" label="已确认工单"></el-table-column> -->
                <el-table-column :show-overflow-tooltip="true" prop="cancel" label="已撤销工单"></el-table-column>
            </ApiTable>
        </PageCard>
    </Page>
</template>

<script>
import Page from '../../components/Page.vue'
import PageCard from 'src/views/components/PageCard.vue'
import ApiTable from 'src/components/ApiTable.vue'
import EdSelect from 'src/components/EdSelect.vue'
import { defineComponent } from 'vue'
import EdDateTimeRange from 'src/components/EdDateTimeRange.vue'
import { listApi, exportApi, getProjectList } from "./api";
import { getDictByCode } from "src/api/dictionaries";
import { returnName } from "src/utils/common.js";
export default defineComponent({
    name: 'member',
    components: { Page, PageCard, ApiTable, EdSelect, EdDateTimeRange },
    data() {
        return {
            queryForm: {
                villageId:"",
                orderType: '',
                pickerTime: [],
                startTime: '',
                endTime: '',
            },
            proParams: {
                placeholder:"请选择所属项目",
                options: [],
                props: {label:"villageName", value:"villageId"}
            },
            orderTypeParams: {
                placeholder:"请选择工单类型",
                options: [],
            },
        }
    },
    activated(){
        // 获取 所属项目
        getProjectList({pageSize: 999999}).then(res=>{
            this.proParams.options = res.data.records;
        })
        // 获取 工单类型
        getDictByCode('serve_order_type').then(res=>{
            this.orderTypeParams.options = res.data.items;
        })
        this.$nextTick(() => {
            this.$refs.table.load(1)
        })
    },
    // mounted(){
    //     this.$nextTick(() => {
    //         this.$refs.table.load(1)
    //     })
    // },
    methods: {
        tableApi: listApi,
        search(){
            this.$refs.table.load(1)
        },
        reset(){
            this.queryForm = {
                villageId:"",
                orderType: '',
                // pickerTime: [],
                startTime: '',
                endTime: '',
            };
            this.$refs.timeRef.reset();
            this.$nextTick(() => {
                this.$refs.table.load(1, 10);
            })
        },
        // 导出
        exportBtn(){
            // this.dataApi.pages = this.$refs.table.getTabledData();
            let page = this.$refs.table.page.total;
            if(page > 0){
                exportApi(this.queryForm).then((res) =>{
                    console.log('导出')
                })
            }else {
                this.$message.info({
                    message:"暂无数据导出",
                    duration: 2000,
                    center:true
                })
            }
        },
        exportSuccess(){
            this.isEdExport = false;
        },
        emitEchoTimeDate(data){
            // $event 子组件$emit传的参数 
            this.queryForm['startTime'] = data.startTime;
            this.queryForm['endTime'] = data.endTime;
            delete this.queryForm.pickerTime;
        },
        returnName(val, options){
            return returnName(val, options)
        },
    }
})
</script>

<style scoped>
.btnBorder{
    border: 1px solid #ccc;
    padding: 5px 15px;
    border-radius: 4px;
}
.btnUpd{
    color: #414448 !important;
    border-color: #414448;
}
.btnPay{
    color: #65A9A5;
    border-color: #65A9A5;
}
.btnDel{
    color: #EE7171;
}
</style>